<template>
	<div id="dashboard" class="absolute fullscreen" style="width: 100%; height: 100%">
		<cesium-viewer :pre-config="setInitialConfig" :properties="normalOptions" @mouse-move="switchCursor" @camera-move-end="moveEnd" :class="[cursor]" @left-click="getCamera" ref="viewer">
			<!-- <entity-polyline :properties="polyLine" /> -->
			<ImageLayerGoogleMap />
			<div ref="content" name="content" />
		</cesium-viewer>
	</div>
</template>

<script>
import CesiumViewer from "@/components/Cesium/CesiumViewer";
import { EntityPolyline, ImageLayerSelfMap, ImageLayerTianditu, ImageLayerBaiduleMap, EntityRadius, ImageLayerGoogleMap } from "@/components/Cesium";
import { normalOptions } from "@/components/Cesium/projectMethods/options";
import { Math, Cartesian3, Cartesian2, Ellipsoid } from "cesium";
import { coordinate, tilesetTools } from "@/components/Cesium/utils";
import { materialColorItem } from "@/components/Cesium/utils/generator";

import gcoord from "gcoord";

export default {
	name: "Dashboard",
	configurations: {
		isDefault: true,
	},
	components: {
		CesiumViewer,
		// widgetTopbar,
		// EntityPolyline,
		// ImageLayerSelfMap,
		// ImageLayerTianditu,
		// EntityRadius,
		ImageLayerGoogleMap,
	},
	data() {
		return {
			showimg: false,
			tilesetOptions: {
				skipLevelOfDetail: true,
				skipLevels: 2,
				loadSiblings: true,
				maximumMemoryUsage: 1024,
				dynamicScreenSpaceError: true,
				url: "",
			},
			initialView: {
				lng: 113.52196928838639,
				lat: 23.281558735867534,
				height: 2852.8431327668277,
				heading: 5.529102756658359,
				pitch: -81.10615363108647,
				roll: 0.008186926973172949,
			},
			dialogFull: false,
			polyLine: {
				positions: [],
				width: 5,
				material: materialColorItem({
					color: "rgb(255,165,0)",
				}),
			},
			layerConfig: {
				alpha: 0.5,
				brightness: 0.9,
				contrast: 1,
				gamma: 1,
				saturation: 1,
			},
			linePositions: [],
			cursor: "",
			ready: false,
			firstTime: true,
			ui: true,
			models: [],
			currentStatus: true,
			bottombarShow: true,
			leftBarShow: true,
			rightBarShow: true,
			lineList: [],
			dialogContent: {
				title: "应急预警",
				show: false,
			},
		};
	},
	created() {},
	mounted() {
		setTimeout(() => {
			this.readyLoad();
		}, 2000);
		// const { ui } = this.$route?.query;
		// this.ui = ui !== "false";
	},
	computed: {
		roleNow() {
			return this.user.role;
		},
		isAdmin() {
			return this.user.role.id == 1;
		},
		normalOptions,
		modelOptions() {
			return this.models.map((url) => {
				return { ...this.tilesetOptions, url };
			});
		},
		// layerControl() {
		// 	return this.$store.state.layerControl;
		// },
	},
	methods: {
		getYujing() {
			this.dialogContent.show = true;
		},
		moveEnd() {
			const { camera, scene } = this.$refs.viewer.viewer;
			let currentMagnitude = camera.getMagnitude();
			var ellipsoid = scene.globe.ellipsoid;
			var height = ellipsoid.cartesianToCartographic(camera.position).height;
			//   console.log("中心点:");
			//   console.log(this.getCenter());
			//   console.log("中心点离地面高度:" + height);

			let center = this.getCenter().split(",");

			// this.$store.state.mapControl.height = height;
			// this.$store.state.mapControl.center = this.getCenter();
			if (height < 10000) {
				this.currentStatus = false;
			} else {
				this.currentStatus = true;
			}
		},
		//获取中心点
		getCenter() {
			const { camera, canvas } = this.$refs.viewer.viewer;
			let centerResult = camera.pickEllipsoid(new Cartesian2(canvas.clientWidth / 2, canvas.clientHeight / 2));
			let curPosition = Ellipsoid.WGS84.cartesianToCartographic(centerResult);
			let curLongitude = (curPosition.longitude * 180) / Math.PI;
			let curLatitude = (curPosition.latitude * 180) / Math.PI;
			let centerPostition = [curLongitude, curLatitude];
			//   转成百度坐标
			var result = gcoord.transform(
				centerPostition, // 经纬度坐标
				gcoord.WGS84, // 当前坐标系
				gcoord.BD09 // 目标坐标系
			);
			return result.toString();
		},
		bottombarControl() {
			this.bottombarShow = !this.bottombarShow;
		},
		leftRightControl() {
			this.leftBarShow = !this.leftBarShow;
			this.rightBarShow = !this.rightBarShow;
		},
		leftBarControl() {
			this.leftBarShow = !this.leftBarShow;
		},
		rightBarControl() {
			this.rightBarShow = !this.rightBarShow;
		},
		switchCursor({ picked, endPosition }) {
			if (picked[0]?.id) {
				this.cursor = "pointer";
			} else {
				this.cursor = "";
				this.$refs.content.hoverEntity = null;
			}
			this.$refs.content.mousePosition = endPosition;
		},
		readyLoad() {
			// this.$notify.success({
			//   message: "模型加载完成",
			// });
			this.ready = true;
		},
		setInitialConfig(viewer) {
			this.setInitialView(viewer);
		},
		setInitialView(viewer) {
			const { camera } = viewer;
			let obj = {};
			let checkList = ["lng", "lat", "height", "heading", "pitch", "roll"];
			for (const key of checkList) {
				if (!this.$route?.query[key]) {
					obj = this.initialView;
					break;
				}
			}
			camera.setView({
				destination: Cartesian3.fromDegrees(parseFloat(obj.lng), parseFloat(obj.lat), parseFloat(obj.height)),
				orientation: {
					heading: Math.toRadians(parseFloat(obj.heading)),
					pitch: Math.toRadians(parseFloat(obj.pitch)),
					roll: Math.toRadians(parseFloat(obj.roll)),
				},
			});
			this.bindMapMove();
		},
		setInitialModel(tileset) {
			tilesetTools.setTilesetHeight(tileset, 0);
			// outline().then(({ data }) => {
			//   this.polyLine.positions = data.map((i) =>
			//     Cartesian3.fromDegrees(i.lng, i.lat, 1)
			//   );
			//   this.polyLine.positions.push(this.polyLine.positions[0]);
			// });
		},
		getCamera(e) {
			const { camera } = this.$refs.viewer.viewer;
			const { height, latitude, longitude } = camera.positionCartographic;
			const { heading, pitch, roll } = camera;
			console.log({
				lng: (longitude * 180) / Math.PI,
				lat: (latitude * 180) / Math.PI,
				height,
				heading: (heading * 180) / Math.PI,
				pitch: (pitch * 180) / Math.PI,
				roll: (roll * 180) / Math.PI,
			});
			// this.lineList.push({ lng: (longitude * 180) / Math.PI,lat: (latitude * 180) / Math.PI,})
			// console.log("this.lineList-----------------")
			// console.log(this.lineList)
			//   this.getPosition(e);
		},
		getPosition({ position }) {
			if (!position) return;
			console.log(position);
			const pointer = coordinate.cartesian3ToLngLat(this.$refs.viewer.pickPosition(position));
			console.log(pointer);
			this.$refs.content.setDraw(pointer);
		},
		tilesetReady(e) {},
		/**
		 * @name 触发监听
		 */
		bindMapMove() {
			const cesiumViewer = this.$refs.viewer.viewer;
			const tt = this;
			console.log(cesiumViewer);
			cesiumViewer.scene.preRender.addEventListener(() => {
				// 一直触发
				if (!tt.infoShow) return;
				const scratch = new Cartesian2();
				const position = Cartesian3.fromDegrees(tt.coordCosition[0], tt.coordCosition[1], 100);
				const canvasPosition = cesiumViewer.scene.cartesianToCanvasCoordinates(position, scratch);
				if (defined(canvasPosition)) {
					tt.setPopPosition(canvasPosition);
				}
			});
		},
	},
};
</script>

<style lang="scss">
html,
body {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.absolute {
	position: absolute;
}
#dashboard {
	overflow-y: auto;
	background-image: linear-gradient(45deg, #000, #2d3436);
	width: 100%;
	height: 100%;
	&::after {
		position: absolute;
		width: 100%;
		height: 100%;
		content: " ";
		pointer-events: none;
		top: 0px;
		left: 0px;
		z-index: 1;
	}
	.first-time {
		transition-delay: 0.5s !important;
	}
	.top-bar {
		width: 100%;
		min-height: 30px;
		z-index: 200;
	}
	.bottom-bar {
		width: 100%;
		min-height: 30px;
	}
	.left-bar,
	.right-bar {
		height: calc(100% - 120px);
		overflow: auto;
		min-width: 200px;
		z-index: 200;
	}
	.left-bar {
		padding-left: 30px;
	}
	.right-bar {
		padding-right: 30px;
	}
}
</style>
